<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%
    response.setHeader("Access-Control-Allow-Origin", "*");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<html>

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>${webName }·数据工厂</title>
    <link href="${pageContext.request.contextPath }/img/webLogoIcon.png"
          rel="shortcut icon">
    <link href="${pageContext.request.contextPath }/css/bootstrap.min.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/font-awesome.css"
          rel="stylesheet">

    <link href="${pageContext.request.contextPath }/css/animate.css"
          rel="stylesheet">
    <link href="${pageContext.request.contextPath }/css/style.css"
          rel="stylesheet">

    <link
            href="${pageContext.request.contextPath }/css/plugins/chosen/chosen.css"
            rel="stylesheet">
    <link
            href="${pageContext.request.contextPath }/css/plugins/select2/select2.min.css"
            rel="stylesheet">

    <!-- FooTable -->
    <link href="${pageContext.request.contextPath }/css/footable.core.css"
          rel="stylesheet">

    <link href="${pageContext.request.contextPath}/css/mypage.css"
          rel="stylesheet">

    <link
            href="${pageContext.request.contextPath}/font-awesome/css/font-awesome.css"
            rel="stylesheet">

    <link
            href="${pageContext.request.contextPath}/css/plugins/iCheck/custom.css"
            rel="stylesheet">

    <link
            href="${pageContext.request.contextPath}/css/plugins/switchery/switchery.css"
            rel="stylesheet">

    <link
            href="${pageContext.request.contextPath}/css/plugins/jasny/jasny-bootstrap.min.css"
            rel="stylesheet">

    <link
            href="${pageContext.request.contextPath}/css/plugins/nouslider/jquery.nouislider.css"
            rel="stylesheet">


    <link
            href="${pageContext.request.contextPath}/css/plugins/awesome-bootstrap-checkbox/awesome-bootstrap-checkbox.css"
            rel="stylesheet">

    <link
            href="${pageContext.request.contextPath}/css/plugins/clockpicker/clockpicker.css"
            rel="stylesheet">

    <link
            href="${pageContext.request.contextPath}/css/plugins/daterangepicker/daterangepicker-bs3.css"
            rel="stylesheet">


    <link
            href="${pageContext.request.contextPath}/css/plugins/touchspin/jquery.bootstrap-touchspin.min.css"
            rel="stylesheet">


</head>

<body>

<div id="wrapper">

    <nav class="navbar-default navbar-static-side" role="navigation">
       
        <jsp:include
                page="../components/left.jsp" flush="true"/>
    </nav>

    <div id="page-wrapper" class="	gray-bg">
        <%-- <div class="row border-bottom">
        <jsp:include page="head.jsp" flush="true" />
    </div> --%>
        <div class="row border-bottom" style="margin-bottom: 20px;">
            <jsp:include page="../components/head.jsp" flush="true"/>
        </div>
        <div class="row wrapper border-bottom white-bg page-heading">
            <div class="col-lg-6">
                <h2>${webName }</h2>
                <ol class="breadcrumb">
                    <li class="nav-main1"><a
                            href="${pageContext.request.contextPath}/admin/tosystem_overview">主页</a>
                    </li>
                    <li class="active"><span>境外数据</span></li>
                    <li class="active"><span>${webName }</span></li>
                </ol>
            </div>
        </div>


        <div class="wrapper wrapper-content animated fadeInRight main-a">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox float-e-margins" id="dataInfoLine"></div>
                </div>
            </div>
        </div>


        <div class=" animated fadeInRight main-b" style="padding: 0px 10px;margin-bottom: 15px;">
            <div class="row">
                <div class="col-lg-12">
                    <div class="ibox">
                        <div class="ibox-content" id="nodatacontent">
                            <!-- search box1 start -->
                            <div class="input-group">
                                <div class="inputbox"
                                     style="position: relative; display: table;">
                                    <div class="input-group-btn">
                                        <button data-toggle="dropdown"
                                                class="btn btn-primary dropdown-toggle" type="button"
                                                style="border-radius: 3px 0 0 3px; margin-bottom: 0"
                                                aria-expanded="false">
                                            <i class="fa fa-bars"></i> &nbsp;全部
                                        </button>
                                        <ul class="dropdown-menu">
                                            <li><a href="#">全部</a></li>
                                            <li><a href="#">正文</a></li>
                                            <li><a href="#">标题</a></li>
                                        </ul>
                                    </div>
                                    <input type="text" class="form-control"
                                           style="width: 440px; padding-right: 42px;"> <i
                                        id="gosearch" class="fa fa-search cursearch" onclick="sendListData(2)"></i>
                                </div>
                            </div>
                            <!-- search box1 end -->
                            <div class="row m-t-sm">
                                <div class="col-lg-12">
                                    <div class="panel blank-panel">
                                        <div class="panel-body">
                                            <div class="tab-content">
                                                <div class="tab-pane active" id="tab-1">
                                                    <div class="feed-activity-list" id="logs"></div>
                                                    <div class="box" id="box"
                                                         style="float: right; margin-top: 35px"></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <jsp:include page="../components/footer.jsp" flush="true"/>
    </div>
</div>


<!-- Mainly scripts -->
<script src="${pageContext.request.contextPath }/js/jquery-2.1.1.js"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js"></script>
<script
        src="${pageContext.request.contextPath }/js/jquery.metisMenu.js"></script>
<script
        src="${pageContext.request.contextPath }/js/jquery.slimscroll.min.js"></script>

<!-- Custom and plugin javascript -->
<script src="${pageContext.request.contextPath }/js/inspinia.js"></script>
<script src="${pageContext.request.contextPath }/js/pace.min.js"></script>
<script
        src="${pageContext.request.contextPath }/js/plugins/chosen/chosen.jquery.js"></script>

<script
        src="${pageContext.request.contextPath }/js/plugins/pace/pace.min.js"></script>
<script
        src="${pageContext.request.contextPath }/js/plugins/jasny/jasny-bootstrap.min.js"></script>


<!-- FooTable -->
<script
        src="${pageContext.request.contextPath }/js/footable.all.min.js"></script>
<script src="${pageContext.request.contextPath}/js/mypage.js"></script>
<!-- Sparkline -->
<script
        src="${pageContext.request.contextPath}/in-admin/js/plugins/sparkline/jquery.sparkline.min.js"></script>
<script
        src="${pageContext.request.contextPath}/js/anychart-base.min.js"></script>
<!-- Page-Level Scripts -->
<script src="${pageContext.request.contextPath}/js/plugins/select2/select2.full.min.js"></script>
<script src="${pageContext.request.contextPath}/js/userCustom.js"></script>
<script>
    $(document).ready(function () {
    	var dataArray=${nowArray};
        createLine("${webName}",1,dataArray);
        $('.chosen-select').chosen({
            search_contains: true, //设置全文查询
            disable_search_threshold: 20000
            //当下拉列表中的选项<4 时隐藏搜索功能
        });
        var config = {
            '.chosen-select': {},
            '.chosen-select-deselect': {
                allow_single_deselect: true
            },
            '.chosen-select-no-single': {
                disable_search_threshold: 10
            },
            '.chosen-select-no-results': {
                no_results_text: 'Oops, nothing found!'
            },
            '.chosen-select-width': {
                width: "95%"
            }
        }
        for (var selector in config) {
            $(selector).chosen(config[selector]);
        }
        let classify = "${classify}";
        let data = new Object();
        data.page = 1;
        data.classify = classify;
        sendListData(data);
    });

    // 请求列表数据
    function sendListData(data) {
       
        $.ajax({
            url: "${pageContext.request.contextPath}/overseas/getOverseasMsg",
            type: "POST",
            dataType: "json",
            contentType: 'application/json;charset=UTF-8',
            data: JSON.stringify(data),
            success: function (res) {
                console.log(res);
                groupListData(res);
            },
            error: function (err) {
                console.log("请求列表数据失败！");
                console.log(err);
                nodata("#nodatacontent");
            }
        })
    }

    // 组装列表数据
    function groupListData(res) {
        let code = res.code;
        let classify ='${classify}';
        if (code == 200) {
            let pageCount = res.pageCount;
            let pageNum = res.pageNum;
            let data = res.data;
            let totalCount = res.totalCount;
            if (pageCount > 500) {
                pageCount = 500;
            }
            paging(totalCount, pageCount, pageNum);
            if (data.length > 0) {
                $("#logs").html('');
                for (var i = 0; i < data.length; i++) {
                    let dataJson = data[i];
                    let num = 0;
                    let keyWords = [];
                    let keywordss = dataJson.key_words
                    if (keywordss != "") {
                        let key_words = JSON.parse(keywordss);
                        for (let key in key_words) {
                            if (num == 4) {
                                break;
                            }
                            keyWords.push(key);
                            num++;
                        }
                    }
                    let art = dataJson;
                    let content = art.content;
                    if (art.extend_string_one != '') {
                        var imglist = JSON.parse(art.extend_string_one);
                        if (imglist.length > 0) {
                            let imgurl = imglist.imgurl;
                            var url = imgurl[0].imgurl
                            $("#logs").append(notu('${pageContext.request.contextPath}/overseas/toOverSeasDetail?classify='+classify+'&article_public_id='+art.article_public_id, art.title, content, art.sourcewebsitename, keyWords, art.publish_time.substring(0,16)));
                        } else {
                            $("#logs").append(notu('${pageContext.request.contextPath}/overseas/toOverSeasDetail?classify='+classify+'&article_public_id='+art.article_public_id, art.title, content, art.sourcewebsitename, keyWords, art.publish_time.substring(0,16)));
                        }
                    } else {
                        $("#logs").append(notu('${pageContext.request.contextPath}/overseas/toOverSeasDetail?classify='+classify+'&article_public_id='+art.article_public_id, art.title, content, art.sourcewebsitename, keyWords, art.publish_time.substring(0,16)));
                    }
                }
            } else {
                nodata("#nodatacontent")
            }
        } else {
            nodata("#nodatacontent");
        }
    }

    function paging(totalData, totalPage, pagenum) {
        $('#box').paging({
            initPageNo: pagenum, // 初始页码
            totalPages: totalPage, //总页数
            totalCount: '合计' + totalData + '条数据', // 条目总数
            slideSpeed: 600, // 缓动速度 单位毫秒
            jump: true, //是否支持跳转
            callback: function (page) {
                // 回调函数
            }
        });
    }

    function JumpToPage(pagenum) {
        let classify = "${classify}";
        if (pagenum > 500) {
            pagenum = 500;
        }
//        sendListData(pagenum);
        let data = new Object();
        data.page = pagenum;
        data.classify = classify;
        sendListData(data);
    }

    function fourLine() {
        var sparklineCharts = function () {
            $("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52],
                {
                    type: 'line',
                    width: '100%',
                    height: '60',
                    lineColor: '#1ab394',
                    fillColor: "#ffffff"
                });

            $("#sparkline2").sparkline([24, 43, 43, 55, 44, 62, 44, 72],
                {
                    type: 'line',
                    width: '100%',
                    height: '60',
                    lineColor: '#1ab394',
                    fillColor: "#ffffff"
                });

            $("#sparkline3").sparkline([74, 43, 23, 55, 54, 32, 24, 12],
                {
                    type: 'line',
                    width: '100%',
                    height: '60',
                    lineColor: '#ed5565',
                    fillColor: "#ffffff"
                });

            $("#sparkline4").sparkline([24, 43, 33, 55, 64, 72, 44, 22],
                {
                    type: 'line',
                    width: '100%',
                    height: '60',
                    lineColor: '#ed5565',
                    fillColor: "#ffffff"
                });
        };
        //        var sparkResize;
        //        $(window).resize(function(e) {
        //            clearTimeout(sparkResize);
        //            sparkResize = setTimeout(sparklineCharts, 500);
        //        });
        sparklineCharts();
    }

    function line() {
        anychart.onDocumentReady(function () {
            var dataSet = anychart.data.set(getData());
            var chart = anychart.line();
            chart.animation(true);
            chart.padding([10, 20, 5, 20]);
            chart.xAxis().labels().padding(5);
            chart.crosshair().enabled(true).yLabel(false).yStroke(null);
            chart.tooltip().positionMode('point');
            chart.title('统计14天每日数据采集状态走势');
            var seriesData_1 = dataSet.mapAs({
                'x': 0,
                'value': 1
            });
            var series_1 = chart.line(seriesData_1);
            series_1.name('日采集数量');
            series_1.hovered().markers().enabled(true).type('circle').size(
                4);
            series_1.tooltip().position('right').anchor('left-center')
                .offsetX(5).offsetY(5);
            chart.legend().enabled(true).fontSize(13).padding(
                [0, 0, 10, 0]);
            chart.container('container');
            chart.draw();

            $('.anychart-credits').remove()
        });

        function getData() {
            return [['2-10', 17.5], ['2-11', 18.9], ['2-12', 20.8],
                ['2-13', 22.9], ['2-14', 25.2], ['2-15', 27.0],
                ['2-16', 26.5], ['2-17', 25.3], ['2-18', 23.4],
                ['2-19', 19.5], ['2-20', 17.8], ['2-21', 16.2],
                ['2-22', 15.4], ['2-23', 14.0], ['2-24', 12.5],
                ['2-25', 10.8], ['2-26', 8.9], ['2-27', 18.0],
                ['2-28', 6.2]]
        }
    }

    //跑马灯方法
    function init() {
        //获取标题
        var title = document.title;
        //分割字符串--->字符数组
        var arr = title.split("");
        //删除第一个元素并返回该元素
        var e = arr.shift();
        //把一个对象添加到数组末尾
        arr.push(e);
        //把数组转换成字符串
        var marquee = arr.join("");
        //返回给浏览器
        document.title = marquee;
        //定时一直执行
        window.setTimeout("init()", 1000);
    }

    // 		window.onload = init;
    //     查看图片大图
    function zoom(that){
        var url =$(that).attr("data-url")
        console.log(url)
        var zoomhtml =
            '<div class="zoombox">'+
            '	<div class="zoomimgbox">'+
            '		<div class="zoomimg">'+
            '			<img width="200px" src="'+url+'">'+
            '		</div>'+
            '	</div>'+
            '</div>'
        $('body').append(zoomhtml)
        $(".zoombox").on("click",function(){
            $(".zoombox").remove()
        })
        var onwheel = function(e){
            console.log(e);
        };

        document.addEventListener("wheel", onwheel, false);
    }
</script>

</body>

</html>
